<template>
  <div class="py-24 pr-24 bd-filt-6 bgc-lightgrey">
    <el-form-item
      ref="picture"
      label="图片"
      class="mb-24"
      :rules="{ ...notEmptyRules, message: '请上传图片' }"
      :prop="`componentData.${index}.config.imgSrc`"
    >
      <PictureMaterialSelector
        :img-url.sync="config.imgSrc"
        @success="() => $refs.picture.clearValidate()"
      ></PictureMaterialSelector>
    </el-form-item>
    <el-form-item label="位置尺寸" class="mb-24">
      <LayoutSetting v-model="model" />
    </el-form-item>
    <BorderSetting v-model="model" class="mb-24" />
    <JumpSetting v-model="config" />
  </div>
</template>

<script>
  import { notEmptyRules } from '@/utils';
  import PictureMaterialSelector from '@/components/PictureMaterialSelector';
  import LayoutSetting from '@/views/productEdit/components/settingComponent/LayoutSetting';
  import BorderSetting from '@/views/productEdit/components/settingComponent/BorderSetting';
  import JumpSetting from '@/views/productEdit/components/settingComponent/JumpSetting';

  export default {
    components: { PictureMaterialSelector, LayoutSetting, BorderSetting, JumpSetting },

    model: { prop: 'model' },

    props: {
      model: {
        type: Object,
        default: () => ({})
      },
      index: {
        type: [Number, String],
        default: undefined
      }
    },

    data() {
      return {
        notEmptyRules
      };
    },

    computed: {
      config() {
        return this.model.config;
      },
      style() {
        return this.model.style;
      },
      origin() {
        return this.model.origin;
      }
    }
  };
</script>
